<script setup lang="ts">
import {reactive, ref, shallowRef, watch} from 'vue'

defineOptions({
  // 控制是否将未声明的为prop的attr透传到根元素上
  inheritAttrs: true,
})

const arr = ref<number[]>([])

let count = 1;

const obj = ref<Record<string, unknown>>({})

const v = ref(0)

const obj2 = reactive({ a: 1 })

watch(obj2, (arr) => {
  console.log('watch obj changed.', arr, count)
}, {
  // immediate: true,
  // deep: true,
})

const refObj = shallowRef({
  count: 1
})

watch(() => refObj.value, (v) => {
  console.log('refObj', v)
}, {
  deep: true,
})

const changeObj = () => {
  obj.value = {
    ...obj.value,
    [`key${count}`]: count
  }
  ++count
  v.value++
  obj2.a++
  refObj.value.count++
}
</script>

<template>
  <div>
    <h1>{{ refObj.count }}</h1>
    <h1 v-bind="$attrs">{{ $attrs.onClick }}</h1>
    <button @click="changeObj">+1</button>
  </div>
</template>

<style scoped>

</style>
